<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="${pageContext.request.contextPath }/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/bootstrap/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>

<title>新建赛事申请表</title>
</head>
<body>
<%@include file="../navigationBar.jsp"%>
	<div class="container">
		<div class="row" role="content">
			<s:form action="matchApply_save" namespace="/"
				class="col-md-6 col-md-offset-2 form-horizontal">
				<div class="hidden alert alert-danger" id="errorMsg"></div>
				<div class="form-group">
					<label class="label label-info" for="proposerName">申请人姓名</label>
					<input class="form-control" id="proposerName" type="text"  name="proposerName">
					<label class="label label-info" for="proposerPhone">申请人电话</label>
					<input class="form-control" id="proposerPhone" type="text"  name="proposerPhone">
					<label class="label label-info" for="matchName">赛事名称</label>
					<input class="form-control" type="text" id="matchName"  name="matchName">
					<label class="label label-info" for="matchProject">赛事项目</label>
					<select class="form-control" id="matchProject" name="matchProject">
						<option value="篮球场">篮球</option>
						<option value="足球场">足球</option>
						<option value="羽毛球场">羽毛球</option>
						<option value="棒球场">棒球</option>
					</select>
					<label class="label label-info" for="placeID">场地ID</label>
					<select class="form-control" id="placeID" name="placeID"></select>
					<label class="label label-info" for="personInCharge">负责人</label>
					<input class="form-control" id="personInCharge" type="text"  name="personInCharge">
					<label for="startTime" class="label label-info"><span>起始时间</span></label>
					<div class="input-group">
					<input class="form-control" type="text" name="startTime" id="startTime">
						<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
					</div>
					<label for="endTime" class="label label-info"><span>结束时间</span></label>
					<div class="input-group">
						<input class="form-control" type="text" name="endTime" id="endTime">
						<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
					</div>
					<div class="alert alert-warning"><span>起始时间和结束时间一旦确定，不能更改，请慎重填写</span></div>
					<s:submit class="btn btn-primary center-block" value="提交" id="subButton"></s:submit>
				</div>
			</s:form>
		</div>
	</div>
	<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap/js/jquery-3.2.0.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript">
    $("#startTime").datetimepicker({
        format: 'yyyy-mm-dd hh:00:00',
        minView:'day',
        language: 'zh-CN',
        autoclose:true,
        startDate:new Date()
    });
    $("#endTime").datetimepicker({
        format: 'yyyy-mm-dd hh:00:00',
        minView:'day',
        language: 'zh-CN',
        autoclose:true,
        startDate:new Date()
    });
    $("#subButton").click(function(e){
    	var startTime=$("#startTime").val();  
        var start=new Date(startTime.replace("-", "/").replace("-", "/"));  
        var endTime=$("#endTime").val();  
        var end=new Date(endTime.replace("-", "/").replace("-", "/"));
        if(end<start){  
        	e.preventDefault(); 
        	$("#errorMsg").removeClass("hidden");
        	$("#errorMsg").text("结束时间要大于起始时间");
        }else{
        	$("#errorMsg").addClass("hidden");
        	$("#errorMsg").text("");
            }
        });
	$(function(){
		setPlaceIDOption();
		});
	$("#matchProject").change(function(){
		$("#placeID").find("option").remove(); 
		setPlaceIDOption();
		});
	var setPlaceIDOption = function(){
 		var url = "matchApply_findFieldByTypeAndNoRent"; 
		var val = $("#matchProject").val();
		var arg = {"field_type" : val};
		$.post(url,arg,function(data){
  			var idList = data.split(",");
			for(var i in idList){
				$("#placeID").append("<option value='"+idList[i]+"'>"+idList[i]+"</option>"); 
				} 
			});
		};
	</script>
</body>
</html>